<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品详情</title>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>frontPage/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>frontPage/css/proList.css"/>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>frontPage/css/mygxin.css" />
		<style type="text/css">
			.tit{
				height: 45px;
			    line-height: 45px;
			    padding: 0 10px;
			    border-bottom: 1px solid #dbdbdb;
			}
			.f1{
				float: left;
			}
			.addre{
				
			    margin: 20px 20px 20px 0;
			    border: 2px solid #dbdbdb;
			    cursor: pointer
			}
			.on{
				border: 2px solid #C10000;
			}
		</style>
		<script type="text/javascript">
			function addCart(){
				var productId=$("#productId").val();
				/* var img=$(".det").val();
				var name=$(".productName").val();
				var price=$(".productPrice").val();*/
				var count=$("#count").html();
				var userId=$("#userId").val();
				$.ajax({
					url:"<%=basePath%>addCartByUserIdAndProductIdF/"+userId+"/"+productId+"/"+count,
					type:"post",
					dataType:"json",
					success:function(data){						
						window.location.href="<%=basePath%>toShoppingCartPage/"+userId;
					},
					error:function(){
						
					}
				})
				
			}
			//结算并提交数据到支付页面
	    	function settlement(farm){
	    		//获取被选中商品得id
	    		var productId=$("#productId").val();
	    		window.location.href = "<%=basePath%>toCheckoutPage/"+farm+"/"+productId;
	    		
	    	}
		</script>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<jsp:include page="header.jsp"/>
		<!-----------------address------------------------------->
		<div class="address">
			<div class="wrapper clearfix">
				<a href="#">首页</a>
				<span>/</span>
				<a href="#"></a>
				<span>/</span>
				<a href="#"></a>
				<span>/</span>
				<a href="#">鞋子详情</a>
			</div>
		</div>
		<!-----------------------Detail------------------------------>
		<div class="detCon">
			<div class="proDet wrapper">
				<div class="proCon clearfix">
					<div class="proImg fl">
						<input type="hidden" id="userId" value="${userId }">
						<input type="hidden" id="productId" value="${product.id }">
						<img class="det" src="<%=basePath%>${product.imgMain }" value="${product.imgMain }" />
						<div class="smallImg clearfix">
							<c:forEach items="${productDetail }" var="productDetail">
								<img src="<%=basePath%>${productDetail.img}" data-src="<%=basePath%>${productDetail.img}">
								<%-- <img src="<%=basePath%>frontPage/img/temp/proDet02.jpg" data-src="<%=basePath%>frontPage/img/temp/proDet02_big.jpg">
								<img src="<%=basePath%>frontPage/img/temp/proDet03.jpg" data-src="<%=basePath%>frontPage/img/temp/proDet03_big.jpg">
								<img src="<%=basePath%>frontPage/img/temp/proDet04.jpg" data-src="<%=basePath%>frontPage/img/temp/proDet04_big.jpg"> --%>
							</c:forEach>
						</div>
					</div>
					<div class="fr intro">
						<div class="title">
							<h4 id="productName">${product.name }</h4>
							<p>${product.cate }</p>
							<span id="productPrice">${product.newPrice }</span>
						</div>
						<div>
							<div class="orderL fl">
								<div class="addres clearfix">
									<div class="addre fl on">
										<div class="tit clearfix">
											<p class="fl">41</p>								
										</div>							
									</div>
									<div class="addre fl">
										<div class="tit clearfix">
											<p class="fl">42</p>								
										</div>							
									</div>
									<div class="addre fl">
										<div class="tit clearfix">
											<p class="fl">43</p>								
										</div>							
									</div>
									<div class="addre fl">
										<div class="tit clearfix">
											<p class="fl">44</p>								
										</div>							
									</div>
									<div class="addre fl">
										<div class="tit clearfix">
											<p class="fl">45</p>								
										</div>							
									</div>
									<div style="clear: both;"></div>
								</div>										
							</div>							
						</div>
						<div style="clear: both;"></div>
						
						<div class="title">
							<h6 id="sum">库存：2096</h6>					
						</div>
						<br><br>
						<div class="num title">
						    <h6>数量:</h6>	
							<img class="fl sub" src="<%=basePath%>frontPage/img/temp/sub.jpg">
							<span class="fl" contentEditable="true" id="count">1</span>
							<img class="fl add" src="<%=basePath%>frontPage/img/temp/add.jpg">
						</div>
						<br><br><br><br>
						<div class="btns clearfix">
							<!-- <a href="#2"><p class="buy fl" onclick="settlement(25)">立即购买</p></a> -->
							<a href="#2"><p class="cart fr" onclick="addCart()">加入购物车</p></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="introMsg wrapper clearfix">
			<div class="msgL fl">
				<div class="msgTit clearfix">
					<a class="on">商品详情</a>
					<a>所有评价</a>
				</div>
				<div class="msgAll">
					<div class="msgImgs" style="margin-left: 9%;">
					<c:forEach items="${imageProduct }" var="imageProduct">
						<img src="<%=basePath%>${imageProduct.img}">
					</c:forEach>
						<%-- <img src="<%=basePath%>frontPage/img/temp/det02.jpg">
						<img src="<%=basePath%>frontPage/img/temp/det03.jpg">
						<img src="<%=basePath%>frontPage/img/temp/det04.jpg">
						<img src="<%=basePath%>frontPage/img/temp/det05.jpg">
						<img src="<%=basePath%>frontPage/img/temp/det06.jpg">
						<img src="<%=basePath%>frontPage/img/temp/det07.jpg"> --%>
					</div>
					<div class="eva">
						<c:forEach items="${messageProduct }" var="messageProduct">
							<div class="per clearfix">
								<img class="fl" src="<%=basePath%>frontPage/img/temp/per01.jpg">
								<div class="perR fl">
									<p>瘦瘦迪***纱帽利</p>
									<p>${messageProduct.content }</p>
									<%-- <div class="clearfix">
										<p><img src="<%=basePath%>frontPage/img/temp/eva01.jpg"></p>
										<p><img src="<%=basePath%>frontPage/img/temp/eva02.jpg"></p>
										<p><img src="<%=basePath%>frontPage/img/temp/eva03.jpg"></p>
										<p><img src="<%=basePath%>frontPage/img/temp/eva04.jpg"></p>
										<p><img src="<%=basePath%>frontPage/img/temp/eva05.jpg"></p>
									</div> --%>
									<p><span>${messageProduct.createTime}</span><span>颜色分类：红黄蓝绿</span></p>
									<p style="color: red">商家：闷骚牛</p>
									<p>${messageProduct.answer }</p>
									<p><span>${messageProduct.answerTime}</span></p>
								</div>
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
		<%-- <div class="like">
			<h4>猜你喜欢</h4>
			<div class="bottom">
				<div class="hd">
					<span class="prev"><img src="<%=basePath%>frontPage/img/temp/prev.png"></span>
					<span class="next"><img src="<%=basePath%>frontPage/img/temp/next.png"></span>
				</div>
				<div class="imgCon bd">
					<div class="likeList clearfix">
						<div>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like01.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like02.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like03.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like04.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html" class="last">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like05.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
						</div>
						<div>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like01.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like02.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like03.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like04.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
							<a href="proDetail.html" class="last">
								<dl>
									<dt><img src="<%=basePath%>frontPage/img/temp/like05.jpg"></dt>
									<dd>【最家】复古文艺风玻璃花瓶</dd>
									<dd>￥193.20</dd>
								</dl>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div> --%>
		<!--返回顶部-->
		<jsp:include page="gotop.jsp"></jsp:include>
		<div class="msk"></div>
		<!--footer-->
		<jsp:include page="footer.jsp"/>
		<script src="<%=basePath%>frontPage/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="<%=basePath%>frontPage/js/cart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
		</script>
	</body>
</html>
